import React from 'react';
import { connect } from 'dva';
import {InputItem} from 'antd-mobile';
import styles from './screen.css'
//
// import arrowIcon from '../../../../../../icons/personal/arrow.png';
// import writeIcon from '../../../../../../icons/personal/write-icon.png';
// const searchImg = require('../../../../../../icons/search.png')
const Screen = ({
  screenArr = [],
  hiddenArr = [],
  ordeyIndex,
  areaIndex,
  typeNameIndex,
  selectIndex,
  isShow,

  typeArr,
  onClickF=()=>{},
  onSelect=()=>{},
}) => {
  // console.log('组件组件ordeyIndex',ordeyIndex);
  // console.log('组件组件areaIndex',areaIndex);
  // console.log('组件组件typeNameIndex',typeNameIndex);
  //
  // console.log('组件',isShow);
  // const ordey = screenArr.ordey == undefined ? '' : screenArr.ordey
  // const area = screenArr.area == undefined ? '' : screenArr.area
  // const typeName = screenArr.typeName == undefined ? '' : screenArr.typeName
  return(

    <div >
      {/*
        screenArr.map((item,index) =>{
          return (
            <div key={index} className={styles.screenItem}>
              {item[0].name}
            </div>
          )
        })
    */  }
     <div className={styles.screen}>
     {selectIndex==1?(<div className={styles.selectScreenItem}  onClick={()=>onClickF('1',isShow)}>{screenArr.ordey[ordeyIndex].name}</div>):(<div className={styles.screenItem}  onClick={()=>onClickF('1',isShow)}>{screenArr.ordey[ordeyIndex].name}</div>)}
     {selectIndex==2?(<div className={styles.selectScreenItem}  onClick={()=>onClickF('2',isShow)}>{screenArr.area[areaIndex].name}</div>):(<div className={styles.screenItem}  onClick={()=>onClickF('2',isShow)}>{screenArr.area[areaIndex].name}</div>)}
     {selectIndex==3?(<div className={styles.selectScreenItem}  onClick={()=>onClickF('3',isShow)}>{typeArr[typeNameIndex].name}</div>):(<div className={styles.screenItem} onClick={()=>onClickF('3',isShow)}>{screenArr.typeName[typeNameIndex].name}</div>)}
{/*        <div className={styles.screenItem}  onClick={()=>onClickF('1',isShow)}>{screenArr.ordey[ordeyIndex].name}</div>
        <div className={styles.screenItem} onClick={()=>onClickF('2',isShow)}>{screenArr.area[areaIndex].name}</div>
        <div className={styles.screenItem} onClick={()=>onClickF('3',isShow)}>{screenArr.typeName[typeNameIndex].name}</div>*/}
      </div>
      {isShow==1?(<div className={styles.screenHidden}>
        {
          screenArr.ordey.map((item,index) => {
            let hiddenItem = [`${styles.hiddenItem}`];
            if (selectIndex==1) {
              if(ordeyIndex == index){
                hiddenItem.length = 0;
                hiddenItem.push(`${styles.selectHiddenItem}`)
              }
            }
              return (
                <div key={index} className={hiddenItem.join('')} onClick={()=>onSelect('1',index)}>
                  <div>{item.name}</div>
                </div>
              )
          })
        }
      </div>):''}
      {isShow==2?(<div className={styles.screenHidden}>
        {
          screenArr.area.map((item,index) => {
            let hiddenItem = [`${styles.hiddenItem}`];
            if (selectIndex==2) {
              if(areaIndex == index){
                hiddenItem.length = 0;
                hiddenItem.push(`${styles.selectHiddenItem}`)
              }
            }
            return (
              <div key={index} className={hiddenItem.join('')} onClick={()=>onSelect('2',index)}>
                <div>{item.name}</div>
              </div>
            )
          })
        }
      </div>):''}
      {isShow==3?(<div className={styles.screenHidden} >
        {
          typeArr.map((item,index) => {
            let hiddenItem = [`${styles.hiddenItem}`];
            if (selectIndex==3) {
              if(typeNameIndex == index){
                hiddenItem.length = 0;
                hiddenItem.push(`${styles.selectHiddenItem}`)
              }
            }
            return (
              <div key={index} className={hiddenItem.join('')} onClick={()=>onSelect('3',index)}>
                <div>{item.name}</div>
              </div>
            )
          })
        }
      </div>):''}

    </div>
  )
}

export default Screen;
